<template>
  <div id="lowPrice">
    <div class="card_a">
      <div class="search_card">
        <el-input v-model="search" placeholder="搜索卡券" clearable @clear="getCard">
<!--          <el-select v-model="searchBy"  slot="prepend">-->
<!--            <el-option label="卡种" value="type"></el-option>-->
<!--            <el-option label="卡类" value="cardrace"></el-option>-->
<!--          </el-select>-->
          <el-button  slot="append" icon="el-icon-search" @click="searchCard"></el-button>
        </el-input>
      </div>
      <el-checkbox-group v-model="choosed" fill="#5cb3cc" class="card_area">
        <el-checkbox-button
          v-for="(item, index) in cards"
          :key="index"
          :label="item"
          class="cards"
          :disabled="item.total_num == 0"
        >
          <div class="card" :style="'background-image:(' + item.url + ')'">
            <!--              <img v-if="item.url.length!==0" :src="item.url" alt="" class="card_img" :style="'backgroundImage:('+item.url+')'">-->
            <div class="card_info">
              <div>
                <div style="font-size: 20px; font-weight: 600">
                  {{ item.cardrace }}
                </div>
                <div>{{ item.types }}</div>
              </div>
              <div
                style="
                  display: flex;
                  justify-content: space-around;
                  width: 100%;
                "
              >
                <div>面值：{{ item.price }}元</div>
                <div>现价：{{ item.priceNow }}元</div>
              </div>
              <div>
                <span>剩余{{ item.total_num }}</span>
              </div>
            </div>
          </div>
        </el-checkbox-button>
      </el-checkbox-group>
    </div>
    <div class="car_area">
      <car :carItem="choosed"></car>
    </div>
  </div>
</template>

<script>
import car from "@/components/car";
export default {
  name: "lowPrice",
  components: { car },
  data() {
    return {
      cards: [],
      choosed: [],
      totalPriceN: 0,
      search:'',
      searchBy:''
    };
  },
  mounted() {
    this.getCard();
  },
  methods: {
    // searchCardBy(){
    //   console.log(this.searchBy,this.search);
    //   this.axios.get('/api/searchBy',{
    //     params:{
    //       by:this.searchBy,
    //       val:this.search
    //     }
    //   }).then(res=>{
    //     console.log(res)
    //   }).catch(err=>{
    //     console.log(err)
    //   })
    // },
    searchCard(){
      console.log(this.search,this.searchBy);
      this.axios.get('/api/searchCard',{
        params:{
          val:this.search
        }
      }).then(res=>{
        console.log(res);
        this.cards = res.data;
      }).catch(err=>{
        console.log(err)
      })
    },
    getCard() {
      this.axios
        .get("/api/getCard")
        .then((res) => {
          console.log(res.data.data);
          this.cards = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    chen() {
      if (window.sessionStorage.getItem("id") == undefined) {
        this.$router.push("/login");
      } else if (this.choosed.length === 0) {
        this.$message.warning("请选择要购买的卡券");
      } else {
        console.log(this.choosed);
      }
    },
  },
};
</script>

<style scoped>
  /deep/ .el-select .el-input {
    width: 130px;
  }
  /deep/ .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
  .search_card{
    margin-left: 44%;
    width: 50%;
    margin-top: 15px;
  }
#lowPrice {
  display: flex;
  justify-content: space-between;
}
.card_area {
  height: 588px;
  overflow-y: auto;
  /*width: 70%;*/
  margin-top: 10px;
  margin-left: 20px;
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  justify-content: flex-start;
}
.cards {
  margin: 10px;
}
/deep/ .el-checkbox-button {
  height: 100px !important;
}
.card {
  text-align: center !important;
  width: 100%;
  height: 100%;
  z-index: 0;
}
/deep/ .el-checkbox-button__inner {
  border-radius: 10px !important;
  border: 1px solid #3a8ee6 !important;
  width: 200px;
  height: 100%;
  line-height: 15px;
}
.card_info {
  width: 100%;
  float: left;
  text-align: center;
  line-height: 20px;
  z-index: 2;
}
.card_a {
  width: 80%;
}
.car_area {
  width: 20%;
  height: 640px;
  overflow-y: auto;
}
</style>
